import React, { useState, useEffect } from 'react';
import { ProTable } from '@ant-design/pro-components';
import type { ProColumns } from '@ant-design/pro-components';
import { Button } from 'antd';
import { queryProxyUser } from '../../../api/axios8081'; // 假设你的接口函数在这个路径下  
import { useParams } from 'react-router-dom';


// 根据接口返回的数据类型定义数据类型  
type ProxyUser = {
  userId: string;
  userName: string;
};

// UserTable 组件  
const UserTable: React.FC = () => {
  const [dataSource, setDataSource] = useState<ProxyUser[]>([]);   
  // 初始化loading状态为false  
  const [loading, setLoading] = useState(false);
  // 定义表格列  
  const columns: ProColumns[] = [
    {
      title: 'ID',
      dataIndex: 'userId',
      key: 'userId',
      width: 80,
    },
    {
      title: '用户名',
      dataIndex: 'userName',
      key: 'userName',
      width: 120,
    },
    {
      title: '操作',
      key: 'option',
      valueType: 'option',
      width: 120,
      render: (_, record) => [
        // 根据需要自定义操作按钮  
        <a key="action1" href="#">删除</a>,
      ],
    },
  ];

  const { Id } = useParams(); // 注意这里是从useParams解构出id  
  let productId01: string | undefined = Id;
  console.log(productId01, '获取的id');

  // UserTable 组件  
  useEffect(() => {  
    const fetchData = async () => {  
       
      try {  
        const productId = productId01; // Assuming this is the correct ID to use  
        console.log(productId, 'Fetching data for product ID');  
          
        const response = await queryProxyUser(productId);  
        console.log(response, '为什么没有反应？');  
  
        if (response) {  
          setDataSource(response.data);  
          console.log(response.data, 'Setting data source');  
        } else {  
          console.error('接口返回的数据格式不正确');  
        }  
      } catch (error) {  
        console.error('获取代理人信息失败:', error);  
      } finally {  
        setLoading(false);  
      }  
    };  
  
    fetchData();  
  }, []); // 空数组表示这个effect只在组件挂载时运行一次  

  return (
    <ProTable<ProxyUser>
      columns={columns}
      rowSelection={{}}
      dataSource={dataSource}
      loading={loading}
      pagination={{
        pageSize: 5,
      }}
      options={false}
      search={false}
      toolbar={{
        actions: [
          <Button type="primary" key="button1" style={{ marginRight: 8 }}>
            添加代理人
          </Button>,
          // ... 其他按钮  
        ],
      }}
    />
  );
};

export default UserTable;